<script setup>
import {reactive,ref,onMounted} from 'vue'
import easyapi from '../api'
import {  useRouter } from 'vue-router'
import { colorPickerContextKey, ElMessage,ElMessageBox, SCOPE } from 'element-plus';


//自定义背景图，自己准备一张图片，引入即可
import Img from '../assets/img.jpg'
//引入'vue3-puzzle-vcode'插件
import Vcode from 'vue3-puzzle-vcode'
onMounted(async function(){
 //查看账户密码是否存在
 if(localStorage.getItem("loginForm")!=null&&Object.keys(localStorage.getItem("loginForm")).length>2 ) {
      
      loginObj.value.rememberMe = true;
      var userPwdInfo = JSON.parse(localStorage.getItem("loginForm"));

      loginObj.value.username=userPwdInfo.username;
      loginObj.value.userpass=userPwdInfo.userpass;
    } else {
      loginObj.value.rememberMe = false;
    }
});
//获取路由器
let $router = useRouter()
//验证码模态框是否出现，默认不展示
const isShow = ref(false)
//登录按钮
const login = () => {
  //展现验证码模态框
  isShow.value = true
}
//用户通过了验证
const success = (msg) => {
  isShow.value = false
  console.log('验证通过' + msg)
//---------
formRef.value.validate(async (valid) => {
    if (valid) {
    //---------
    let result = await easyapi.postForm("/api/dologin",loginObj.value)
    console.log("qqqqqqqqqqqqqqqqqqqqqqqqqq")
    console.log(result);
    if(result.code==200 && result.data){
            //登陆成功
            //提示
            //存放token
            sessionStorage.setItem("easytoken",result.data.token);
            sessionStorage.setItem("Agetusername",result.data.getdata.username);
            //提示
            ElMessage({
        type: 'success',
        message: result.message
      });
      
      setTimeout(function(){
        //在js代码跳转
        router.push("/carrental");
      },200);
      if(loginObj.value.rememberMe==true){
                    localStorage.setItem("loginForm",JSON.stringify(loginObj.value));
                    // localStorage.setItem("rememberMeValue",JSON.stringify(rememberMe.value));
                }else{
                    localStorage.setItem("loginForm",JSON.stringify({}));
                }   
    }else if(result.code==403 ){
      ElMessage({
        type: 'info',
        message: result.message
      });
        console.log('error submit!')
        setTimeout(function(){
        //在js代码跳转
        router.push("/login");
      },200);
        
    }
    }
})
  //通过验证跳转到home首页
  
  // $router.push('/home')
}
//用户点击遮罩层，关闭模态框
const close = () => {
  isShow.value = false
}
//用户验证失败
const fail = () => {
  console.log('验证失败')
 
}



const router = useRouter();
const formRef=ref({});
const formRefA=ref({});
const loginObj =ref({});
const addVisible = ref(false);
const addObject=ref({});
// const dologin =async function () {
    
// //----------
// }
const checkpass=function(rule,value,callback){
  let reg= /^\d{6,16}$/;//6到16位的数字
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(loginObj.value.userpass)){
        callback();
    }else{
        callback(new Error('密码格式不正确'))
    }
   
}
const checkname=function(rule,value,callback){
  let regusername=/^[A-Za-z0-9]{6,12}$/;//6到12的密码
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(regusername.test(loginObj.value.username)){
        callback();
    }else{
        callback(new Error('用户名格式不正确'))
    }
}


const easyrules= {
  userpass: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      validator: checkpass,
      trigger: 'blur'
    }
  ],
  username: [
    {
      required: true,
      message: '请输入账户',
      trigger: 'blur'
    },
    {
      validator: checkname,
      trigger: 'blur'
    }
  ]
  
};

const register=function(){
  addObject.value={};
  addVisible.value=true;
}
//保存新增数据代码 addObject
const addsave=async function(){
  //发送请求
  let result=await easyapi.postForm("/api/register",addObject.value);
  //表格数据变更
  //提示
  console.log(result.data)
  if(result.data==1){
   ElMessage({
        type: 'success',
        message: '添加成功'
      })
      console.log("1111111111111111111")
    }
  if(result.data==0){
      ElMessage({
        type: 'false',
        message: '添加失败,账号已经存在'
      })
      console.log("22222222222222222222")
    }
    if(result.data==2){
      ElMessage({
        type: 'false',
        message: '添加失败,两次密码输入不一致'
      })
    }
    addVisible.value=false;
}



</script>

<template>
  <div class="common-layout">
    <el-form
        :rules="easyrules"
        ref="formRef"
        :model="loginObj"
        
    >
  

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
     
      </head>
      
      <body>
        <div class="all">
          <div class="log">
            <div class="register">
              <form>
                <div class="register-top-grid">
                  <h3>汽车租赁系统</h3>
                  
                  <el-form-item label="用户" prop="username" :rules="easyrules.username">
                    <el-input v-model="loginObj.username" placeholder="请输入用户名" ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="userpass" :rules="easyrules.userpass">
                    <el-input type="password" v-model="loginObj.userpass" placeholder="请输入密码" ></el-input>
                  </el-form-item>
                  <el-form-item prop="remember">
                    <el-checkbox v-model="loginObj.rememberMe">记住我</el-checkbox>
                  </el-form-item>
                  
                </div>
                
                <div class="text-center">
                  <input
                    type="button"
                    value="提交"
                    class="tijiao"
                    @click="login()"
                  />
                  <Vcode :show="isShow" @success="success" @close="close" @fail="fail" :imgs="[Img]"></Vcode>
                </div>
              </form>
            </div>
          </div>
          <div class="reg">
            <div class="reg_1">
              <h2>没有账号？</h2>
              <p>立即注册加入我们吧，和我们一起开启旅程吧</p>
              <a href="/register.html">
                <button type="primary" class="sig" @click="register()">注册</button>
              </a>
            </div>
          </div>
        </div>
      </body>
    </html>
  </el-form>

  <!-- 注册弹出的代码框 -->
<el-dialog v-model="addVisible" title="注册账号" width="400" >
  <el-form :model="addObject" >
    <!-- <el-form-item label="id" :label-width="80">
      <el-input v-model="addObject.id" autocomplete="off" />
    </el-form-item> -->
    <el-form-item label="注册账号" :label-width="80" >
      <el-input v-model="addObject.username" autocomplete="off" />
    </el-form-item>
    <el-form-item label="注册密码" :label-width="80" >
      <el-input v-model="addObject.userpass" autocomplete="off" />
    </el-form-item>
    <el-form-item label="确认密码" :label-width="80" >
      <el-input v-model="addObject.confirmpassword" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="addVisible = false">取消</el-button>
      <el-button type="primary" @click="addsave">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>
</div>
</template>

<style>
        .all {
          width: 800px;
          box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
          margin: auto;
          margin-top: 5%;
          display: flex;
          border-radius: 35px;
          background-color: #ffffff;
          height: 550px;
        }
        .log {
          width: 50%;
          margin: auto;
        }
        .reg {
          width: 50%;
          height: 100%;
          margin: auto;
          background-color: #20b2aa;
          border-radius: 35px;
          color: #ffffff;
        }
        .reg_1 {
          text-align: center;
          margin: auto;
          margin-top: 50%;
        }
        .reg_1 h2 {
          font-weight: 700;
        }
        .reg_1 p {
          margin: 15px 0px 25px 0px;
        }
        .sig {
          width: 70px;
          height: 30px;
          border-radius: 12px;
          background-color: #20b2aa;
          border-color: #fff;
          color: #ffffff;
        }
        #tiao {
          padding: 0em 0;
        }
        .reg_1 a {
          color: #ffffff;
        }
        h3 {
          font-size: 3em;
          color: black;
          padding-bottom: 1em;
          margin: 0;
          text-align: center;
          font-family: "Marvel-Regular";
        }
        
        span {
          color: #999;
          font-size: 0.85em;
          padding-bottom: 0.2em;
          display: block;
          text-transform: uppercase;
          margin-bottom: 4px;
        }
    
        .register-top-grid {
          color: black;
          padding-bottom: 1em;
          margin: 0;
          font-family: "Marvel-Regular";
          margin: 10px 0;
        }
        .text-center {
          text-align: center;
        }
        .tijiao {
          width: 100px;
          height: 40px;
          background-color: #409eff; /* 按钮背景色 */
          color: white;
          border: none;
          border-radius: 20px; /* 圆角按钮 */
          font-size: 16px;
          cursor: pointer;
        }
        
        .tijiao:hover {
          background-color: #66b1ff; /* 鼠标悬浮时的按钮背景色 */
        }
        
        .common-layout::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('../assets/aaa.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          z-index: -1; /* 确保伪元素在内容下方 */
        }
        /* 基础样式 */
.el-input {
  width: 100%; /* 宽度占满父元素 */
 
  font-size: 17px; /* 字体大小 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
  border-radius: 4px; /* 边框圆角 */
  transition: border-color 0.3s; /* 边框颜色变化的过渡效果 */
}
.el-form-item__label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 自定义字体 */
  white-space: nowrap;
  color: #333; /* 文字颜色 */
  font-size: 16px; /* 文字大小 */
  font-weight: 1000; /* 字体加粗 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文本阴影 */
  margin-right: 5px; /* 标签和输入框之间的间距 */
}

/* 外层容器使用Flexbox布局 */
.register-top-grid {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 子元素在交叉轴上居中对齐 */
  justify-content: center; /* 子元素在主轴上居中对齐 */
  padding: 20px; /* 容器内边距，根据需要调整 */
}

/* 每个表单项的样式，设置左右外边距 */
.el-form-item {
  margin: 10px 0; /* 垂直方向的外边距，根据需要调整 */
  /* 以下样式为左右外边距，根据需要调整 */
  margin-left: 20px;
  margin-right: 20px;
  width: calc(100% - 40px); /* 减去左右外边距的宽度，确保输入框宽度合适 */
}

/* 输入框宽度调整，确保不会超出容器宽度 */
.el-input__inner {
  width: 100%; /* 输入框宽度设为100% */
}
      </style>


